<template>
	<view>
		<text class="todoTitle">todolist待办事项</text>
		<input placeholder="请输入待办事项" v-model="newTodo">
		<button @click="addTodo">添加</button>
	</view>

	<view>
		<text>待办事件</text>
		<view v-for="(item,index) in todo" :key="index">
			<text>{{item}}</text>
			<button @click="deleteTodo(index)">删除</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'; // 导入ref响应式API



	// 使用ref定义响应式变量
	let todo = ref([]);
	let newTodo = ref('');

	function addTodo() {
		const value = newTodo.value;
		if (value) { // 避免添加空内容
			todo.value.push(value);
			newTodo.value = ""; // 清空输入框
		}
	}

	function deleteTodo(index) {
		todo.value.splice(index, 1);
	}
</script>

<style>

</style>